<template>
    <a-layout id="components-layout-demo-fixed">
        <a-layout-header :style="headerStyle" class="phone_logo login-header-box">
            <img :src="logo" class="logo" />{{name}}
            <div class="login-header-donwnload">
                <span>手机端下载 &nbsp;&nbsp;&nbsp;</span>
                <a-popover placement="bottom" class="download-qrcode">
                    <template slot="content">
                        <div ref="AndroidBox" class="center" style="margin:0 auto"></div>
                    </template>
                    <template slot="title">
                        <div class="center">Android下载</div>
                    </template>
                    <a-icon type="android" theme="filled" style="font-size:20px;cursor:pointer;color:#97C13E" @mouseover="creatQrCode" />
                </a-popover>
                <a-popover placement="bottom" class="download-qrcode">
                    <template slot="content">
                        <div ref="IosBox"></div>
                    </template>
                    <template slot="title">
                        <span>IOS下载</span>
                    </template>
                    <a-icon type="apple" theme="filled" style="font-size:20px;cursor:pointer;color:#272636" @mouseover="isoQrcode" />
                </a-popover>
            </div>
        </a-layout-header>
        <!-- 手机logo -->
        <a-layout-header :style="headerStyle" class="phone_logo_icon">
            <img :src="phone_logo" class="logo" />{{name}}
        </a-layout-header>
        <a-layout-content :style="contentStyle">
            <a-row type="flex" justify="center" align="middle" class="phone_external" style="height:100%;flex:1;">
                <!-- //轮播图 -->
                <a-col class="phone_style">
                    <a-carousel autoplay arrows class="my-carousel">
                        <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;z-index: 1">
                            <a-icon type="left-circle" />
                        </div>
                        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                            <a-icon type="right-circle" />
                        </div>
                        <div v-for="(item,index) in loginImages" :key="index" style="height:500px;">
                            <img :src="item.imgUrl" />
                        </div>
                    </a-carousel>
                </a-col>
                <a-col class="phone_style">
                    <div class="login-box">
                        <div class="card">
                            <div class="card-body login-card-body">
                                <p class="login-box-msg">用户登录</p>
                                <div class="input-group mb-5">
                                    <input type="text" class="form-control" placeholder="手机号/账户名" v-model="userInfo.userName" @keyup.enter="handleSubmit" />
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fa fa-user"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-5">
                                    <input type="password" class="form-control" placeholder="密码" v-model="userInfo.password" @keyup.enter="handleSubmit" />
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-5" v-if="codeVisible">
                                    <input style="border-right: 1px solid #ced4da;" type="text" class="form-control col-8" placeholder="验证码" v-model="userInfo.verifyCode" @keyup.enter="handleSubmit" />
                                    <div class="verifyCode col-4">
                                        <img :src="verifyCodeUrl" @click="referTimestamp" />
                                    </div>
                                </div>
                                <div class="row">
                                    <!-- /.col -->
                                    <div class="col-12">
                                        <button type="btn" @click="handleSubmit" class="btn btn-primary btn-block login-btn" :disabled="!loginBtn">
                                            立刻登录
                                        </button>
                                    </div>
                                    <div class="col-12 mt-4 more-oprate">
                                        <router-link to="forgetPwd" class="text-center mr-2"> [忘记密码]</router-link>
                                        <router-link to="register" class="text-center mr-2"> [注册]</router-link>
                                        <!-- <div class="icheck-primary">
                          <input type="checkbox" id="remember" />
                          <label for="remember">
                            记住我
                          </label>
                        </div> -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                            </div>
                            <!-- /.login-card-body -->
                        </div>
                    </div>
                </a-col>
                <a-col class="phone_list">
                    <div>
                        <h3>登录方式</h3>
                    </div>
                    <div class="phone_download">
                        <div class="phone_disp">
                            <div class="icon_div">
                                <i class="iconfont">&#xe62f;</i>
                            </div>
                            <div style="padding: 0 0 0 10px">手机端：</div>
                        </div>
                        <div class="phone_dow_out">
                            <p v-if="Android_link"><i class="iconfont phone_icon_out" style="color: rgb(151, 193, 62);">&#xe690;</i>
                                <a-tag class="phone_download_text">Android</a-tag><a class="phone_download_a" :href="Android_link"><i class="iconfont">&#xe632;</i></a>
                            </p>
                            <p v-if="IOS_link"><i class="iconfont" style="color: #ff6600">&#xe630;</i>
                                <a-tag class="phone_download_text">IOS</a-tag><a class="phone_download_a" :href="IOS_link"><i class="iconfont">&#xe632;</i> 下载APP</a>
                            </p>
                        </div> <br>

                    </div>
                    <div>
                        <div class="phone_icon">
                            <div class="cper_i">
                                <div class="icon_div">
                                    <i class="iconfont">&#xe62e;</i>
                                </div>
                            </div>
                            <div>
                                电脑端：
                            </div>
                        </div>
                        <div class="phone_link">
                            <a href="http://www.sibanyun.com">http://www.sibanyun.com</a>
                        </div>
                    </div><br> <br> <br> <br>
                    <!-- <div>
                       联系我们：
                      <div>
                        QQ: 44444444
                      </div>
                       <div>
                        手机: 44444444
                      </div> -->
                </a-col>
            </a-row>
        </a-layout-content>
        <a-layout-footer :style="footerStyle">
            {{copy}} <a href="http://beian.miit.gov.cn" target="_blank">{{ipc}}</a> 客服电话：{{phone}}
            <a class="ml-1" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=584418600&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:584418600:52" alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
            <!-- <br/>
        <a class="ml-2" target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=ffMyCDgPwK9pchiDp0EN-ISAOuDnbhZN&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="QQ交流群1" title="QQ交流群1"></a>
        <a class="ml-2" target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=E_lZl2D6QPzaPCoYR3gxGMIjsytd-qgV&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="QQ交流群２" title="QQ交流群２"></a> -->
        </a-layout-footer>
        <!-- <navRight class="navRight_display"></navRight> -->
        <!-- 下载遮罩层 -->
        <dowmask :class=" wechart_browser !== 2 ? 'dowmask_display' : '' "></dowmask>
    </a-layout>
</template>

<script>
import navRight from "./right/index"
import dowmask from "./right/dowMask"
import logo from "@/assets/logo.png";
import Vue from "vue";
import store from "@/store";
import { mapActions } from "vuex";
import { timeFix } from "@/utils/util";
import { GetPublicKey, Encrypt } from "@/api/rsa";
import { LoginConfig, getDownloadUrl } from "@/api/login";
import { getAllDict } from "@/api/dictData";
import { mapState } from "vuex";
import QRCode from "qrcodejs2";

export default {
    name: "login",
    components: {
        navRight,
        dowmask
    },
    metaInfo () {
        return {
            title: this.title,
            meta: this.meta
        }
    },
    data () {
        return {
            headerStyle: {},  //头部样式
            contentStyle: {
                backgroundRepeat: "round",
            },            //中部样式
            footerStyle: {},             //底部样式
            logo,                       //logo
            name: "",         //网址名称
            copy: "© 2019",              //版权信息
            phone: "188200",             //客服电话
            ipc: "渝IPCP备",             //备案信息
            title: "",
            meta: [],
            status: 1,                   //网站状态(0:关闭 1:开启)
            cause: "系统维护...",         //关闭原因
            loginImages: [],             //轮播图
            isLoginError: false,
            LoginErrorMeg: "",
            userInfo: {
                userName: "",
                password: "",
                verifyCode: ""
            },
            // publicKey: "",
            loginBtn: true,
            codeVisible: false,
            verifyCode: this.$Global.ApiBaseUrl + "/verifyCode/loginImageCode?timestamp=",             //图片验证码地址
            timestamp: new Date().getTime(),
            loginImages: [],                       //轮播图
            Android_link: '',    // 安卓下载地址
            IOS_link: '',         // IOS 下载地址
            phone_logo: '',       // 手机logo
            runing: 0,
            iosing: 0,
            wechart_browser: 1,
        };
    },
    created () {
        // this.GetPublicKey();
        this.LoginConfig();
    },
    mounted () {
        // if (!this.publicKey) {
        //     this.GetPublicKey();
        // }
        this.app_downold();

        this.wechart();

    },
    computed: {
        verifyCodeUrl: function () {
            const { verifyCode, timestamp } = this;
            return verifyCode + timestamp + "&userPhone=" + this.userInfo.userName;;
        },
        ...mapState({
            userInfo_temp: state => state.user.info,
            permissions: state => state.user.permissions,
        }),



    },
    methods: {
        ...mapActions(["Login", "Logout"]),

        wechart () {
            let ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                this.wechart_browser = 2;
                return true;
            } else {
                return false;
            }
        },

        //生成二维码
        creatQrCode () {
            this.runing += 1;
            if (this.runing == 1) {
                setTimeout(() => {
                    new QRCode(this.$refs.AndroidBox, {
                        text: this.Android_link, // 需要转换为二维码的内容
                        width: 100,
                        height: 100,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }, 500)
            }
        },
        isoQrcode () {
            this.iosing += 1;
            if (this.iosing == 1) {
                setTimeout(() => {
                    new QRCode(this.$refs.IosBox, {
                        text: this.IOS_link, // 需要转换为二维码的内容
                        width: 100,
                        height: 100,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }, 500)
            }
        },
        // 获取app、下载地址
        app_downold () {
            getDownloadUrl({ type: 1 }).then((rows) => {
                if (rows.code == 200) {
                    if (rows.data) {
                        this.Android_link = rows.data.downloadUrl;
                    }
                }
            })
            getDownloadUrl({ type: 2 }).then((rows) => {
                if (rows.code == 200) {
                    if (rows.data) {
                        this.IOS_link = rows.data.downloadUrl;
                    }
                }
            })
        },
        //获取登录页 配置
        LoginConfig () {
            LoginConfig().then(res => {
                const { headerStyle, contentStyle, footerStyle } = this;
                const { code, data, message } = res;
                if (code == 200) {
                    console.log(res)
                    // 手机logo
                    this.phone_logo = res.data.iconLogo;
                    const { name, logo, copy, phone, ipc, title, backColor, backImgUrl, keyWord, description, status, cause, loginImages } = data;
                    Object.assign(contentStyle, {
                        backgroundColor: backColor,
                        backgroundImage: `url(${backImgUrl})`,
                    });
                    Object.assign(headerStyle, {
                        backgroundColor: backColor,
                    });
                    Object.assign(footerStyle, {
                        backgroundColor: backColor,
                    });
                    let meta = new Array();
                    if (keyWord) {
                        meta.push({                 // set meta
                            name: 'keyWords',
                            content: keyWord
                        })
                    }
                    if (description) {
                        meta.push({                 // set meta
                            name: 'description',
                            content: description
                        })
                    }
                    Object.assign(this, {
                        title, name, logo, copy, phone, ipc, loginImages, meta
                    })
                    store.dispatch("SetDefaultLogo", logo);
                    console.log("this.meta:", this.meta, this.loginImages)
                }
            })
        },
        // //获取秘钥
        // GetPublicKey () {
        //     const { publicKey } = this;
        //     if (!publicKey) {
        //         GetPublicKey().then(response => {
        //             if (response.code === 200) {
        //                 this.publicKey = response.data;
        //             }
        //         })
        //     }

        // },
        //登录
        handleSubmit (e) {
            this.loginBtn = false;
            e.preventDefault();
            const { userInfo, state, Login, codeVisible } = this;
            console.log("state", state);
            if (!userInfo.userName) {
                this.$message.warn("用户名不能为空");
                this.loginBtn = true;
                return false;
            }
            if (!userInfo.password) {
                this.$message.warn("密码不能为空");
                this.loginBtn = true;
                return false;
            }
            let verifyCode = userInfo.verifyCode;
            if (codeVisible && !verifyCode) {
                this.$message.warn("验证码不能为空");
                this.loginBtn = true;
                return false;
            }
            // 获取 公钥
              GetPublicKey().then(response => {
                    if (response.code === 200) {
                        let publicKey = response.data;
                        //加密
                        const loginData = {
                            userName: Encrypt(publicKey, userInfo.userName),
                            password: Encrypt(publicKey, userInfo.password),
                            verifyCode
                        }
                        Login(loginData).then(res => this.loginSuccess(res)).catch(err => this.requestFailed(err));
                    }else{
                        this.$message.warn("登录失败，请稍后重试");
                    }
                })
            
            // .finally(() => {
            //   state.loginBtn = false;
            // });

        },
        loginSuccess (res) {
            console.log("res", res);
            this.loginBtn = true;
            this.$router.push({ path: "/" });
            // 延迟 1 秒显示欢迎信息
            if (this.loginBtn) {
                setTimeout(() => {
                    let message = `尊敬的用户 ${timeFix()}，欢迎回来`;
                    this.$nlyaToast.toast(message, {
                        title: `登录成功`,
                        toaster: "nly-toaster-top-center",
                        variant: "success",
                        solid: true
                    });
                    // this.$layer.msg("登录成功" + message);
                    if (this.userInfo_temp.roles[0] == "普通角色") {
                        this.$router.push('/views/system/info/companyInfo');
                        // this.$confirm({
                        //     title: "提示",
                        //     content: '请选择产品',
                        //     onOk () { },
                        //     onCancel () { },
                        // });
                    }
                }, 1000);
            }
            //获取字典数据
            getAllDict().then(res => {
                if (res.code === 200) {
                    localStorage.setItem('dict', JSON.stringify(res.data));
                }
            })

            this.isLoginError = false;
        },
        requestFailed (err) {
            this.loginBtn = true;
            console.log("登录失败....", err.response);
            this.isLoginError = true;
            // this.GetPublicKey();
            let message =
                ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试";
            let code = ((err.response || {}).data || {}).code || 10000;
            if (code == 9999) {
                this.codeVisible = true;
            } else if (code == 9998) {
                this.codeVisible = true;
                this.timestamp = new Date().getTime();
            }
            // this.$layer.msg(message);
            this.$nlyaToast.toast(message, {
                title: `登录失败`,
                variant: "danger",
                toaster: "nly-toaster-top-center",
                solid: true
            });
        },

        //刷新时间
        referTimestamp () {
            this.timestamp = new Date().getTime();
        }
    }
};
</script>

<style lang="less" >
    @media (max-width: 500px) {
        /** 小于500px */
        body {
            min-width: 0 !important;
        }

        .cper_i {
            padding: 0 10px 0 0;
        }
        .icon_div {
            text-align: center;
            border-radius: 50px;
            height: 30px;
            width: 30px;
            background: #40a9ff;
            i {
                color: #fff !important;
                top: 0 !important;
                padding: 0 !important;
                font-size: 18px !important;
            }
        }
        .phone_icon_out {
            width: 80%;
            padding: 0 0 0 32px;
        }
        .navRight_display {
            display: none;
        }
        .phone_style {
            display: none;
        }
        .phone_logo {
            display: none;
        }
        .phone_logo_icon {
            text-align: center;
            padding-top: 10px;
        }
        .phone_dow_out {
            // width: 85%;
            position: relative;
            left: 10px;
            // margin: auto;
            i {
                font-size: 20px;
                // color: #40a9ff;
            }
        }
        .phone_link {
            height: 40px;
            line-height: 40px;
            // text-align: center;
            padding: 0 0 0 40px;
            a {
                color: #000;
            }
        }
        .phone_icon {
            display: flex;
            height: 36px;
            line-height: 30px;
            font-size: 16px;
            i {
                // font-size: 18px;
                color: #40a9ff;
                padding: 0 8px 0 0;
                position: relative;
                top: 3px;
            }
        }
        .phone_external {
            height: 100% !important;
        }
        .phone_download {
            padding: 30px 0 0 0;
            .phone_download_text {
                border: 0;
                width: 25%;
                text-align: center;
                font-size: 18px;
            }
            .phone_download_a {
                // padding: 5px 20px 5px 20px;
                border-radius: 4px;
                // background: #40a9ff;
                color: #000 !important;
            }
            .phone_disp {
                display: flex;
                height: 50px;
                line-height: 30px;
                // border: 1px solid red;
                i {
                    font-size: 30px;
                    color: #40a9ff;
                    padding: 0 8px 0 0;
                }
                div {
                    font-size: 16px;
                }
            }
        }
        .phone_list {
            width: 80%;
            position: absolute;
            top: 100px;
        }
    }
    @media (min-width: 501px) {
        /** 大于501px */
        .phone_list {
            display: none;
        }
        .phone_logo_icon {
            display: none;
        }
    }
    .dowmask_display {
        display: none;
    }
    #components-layout-demo-fixed {
        @media (min-width: 700px) {
            .my-carousel {
                width: 700px !important;
                height: 500px;
            }
        }
        @media (max-width: 700px) {
            .my-carousel {
                width: 100vw !important;
                height: 500px;
            }
        }
        @media (max-width: 430px) {
            .login-box {
                width: 80vw !important;
                .login-card-body {
                    padding: 20px 50px !important;
                }
            }
        }
        .my-carousel {
            .slick-list {
                height: 500px;
                img {
                    max-height: 100%;
                }
            }
        }
        height: 100%;
        width: 100%;
        //头部样式
        .ant-layout-header {
            height: 70px;
            background: #fff;
            color: #333;
            font-size: 2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        //中部样式
        .ant-layout-content {
            min-height: auto;
        }
        //底部
        .ant-layout-footer {
            background: #fff;
            text-align: center;
        }
        .logo {
            height: 100%;
        }

        .ant-carousel .slick-slide {
            text-align: center;
            // height: 160px;
            // line-height: 160px;
            // background: #364d79;
            overflow: hidden;
        }
        .ant-carousel .custom-slick-arrow {
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #0069d9;
            background-color: rgba(31, 45, 61, 0.11);
            opacity: 0.3;
        }
        .ant-carousel .custom-slick-arrow:before {
            display: none;
        }
        .ant-carousel .custom-slick-arrow:hover {
            opacity: 0.5;
        }

        .ant-carousel .slick-slide h3 {
            color: #fff;
        }

        .ant-carousel .slick-dots {
            height: auto;
        }
        .ant-carousel .slick-slide img {
            // border: 5px solid #fff;
            display: block;
            margin: auto;
            max-width: 80%;
        }
        .ant-carousel .slick-thumb {
            bottom: -45px;
        }
        .ant-carousel .slick-thumb li {
            width: 60px;
            height: 45px;
        }
        .ant-carousel .slick-thumb li img {
            width: 100%;
            height: 100%;
            filter: grayscale(100%);
        }
        .ant-carousel .slick-thumb li.slick-active img {
            filter: grayscale(0%);
        }
        //登录
        .login-box {
            width: 430px;
            .login-card-body {
                padding: 20px 100px;
            }
        }
        .login-box-msg {
            font-size: 1.8rem !important;
        }
        .login-btn {
            font-size: 1.2rem !important;
        }
        .form-control {
            height: calc(2.5rem + 2px);
        }
        .more-oprate {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 1.1rem !important;
        }

        .verifyCode {
            display: flex;
        }
    }

    // iconfont 图标库
    @font-face {
        font-family: 'iconfont'; /* Project id 1412508 */
        src: url('https://at.alicdn.com/t/font_1412508_i8e415kmol9.woff2?t=1631329793369')
                format('woff2'),
            url('https://at.alicdn.com/t/font_1412508_i8e415kmol9.woff?t=1631329793369')
                format('woff'),
            url('https://at.alicdn.com/t/font_1412508_i8e415kmol9.ttf?t=1631329793369')
                format('truetype');
    }

    .iconfont {
        font-family: 'iconfont' !important;
        /* font-size: 16px; */
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .login-header-box {
        position: relative;
        .login-header-donwnload {
            position: absolute;
            right: 16%;
            top: 0;
            width: auto;
            height: 100%;
            font-size: 14px;
        }
        .download-qrcode {
            text-align: center;
            margin-right: 10px;
        }
        .center {
            text-align: center;
        }
    }
    .ant-popover-arrow {
        border: none !important;
    }
    .ant-popover-inner {
        border: none !important;
    }
    .ant-popover-title {
        min-width: auto !important;
    }
</style>
    